<template>
	<view id="dibu">
		<view class="tou">
			<view class="tou_img">
				<image src="../../static/collection-image/冲锋衣.jpeg" ></image>
			</view>
			<view class="tou_des">
				<view><text>￥239</text></view>
				<view><text>库存49</text></view>
				<view><text>已选择：红色 XL</text></view>
			</view>
		</view>
	
	    <view class="dikou">
			<text>*使用10公里徒步里程扣减100元，到手价139</text>
		</view>
		
		<view class="yanse">
			<view>
				<text>颜色</text>
			</view>
			<view>
				<view >红色</view>
				<view >白色</view>
				<view >黑色</view>
			</view>
			
		</view>
	
	    <view class="size">
			<view>
				<text>尺寸</text>
			</view>
			<view>
				<view>X</view>
				<view>XL</view>
				<view>XXL</view>
				<view>XXXL</view>
				<view>XXXXL</view>
				<view>L</view>
			</view>
		</view>
	
	    <view class="number">
			<view>购买数量</view>
			<view>
				<uni-number-box></uni-number-box>
			</view>
		</view>
		
		<view>
			<button>确定</button>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
page{
	background-color: rgb(145,145,145);
}

.tou{
	display: flex;
	width: 750rpx;
}
.tou_img{
	width: 250rpx;
	height: 250rpx;
}
.tou_img image{
	width: 250rpx;
	height: 250rpx;
}


.tou_des{
	flex: 1;
	padding: 50rpx 10rpx;
}

.dikou{
	font-size: 20rpx;
	color: red;
	padding: 10rpx;
}

.yanse,.size{
	padding: 10rpx;
	line-height: 80rpx;
}

.yanse >view:last-child,.size >view:last-child{
	display: flex;
	flex-wrap: wrap;
}

.yanse >view:last-child view,.size >view:last-child view{
	width: 150rpx;
	height: 50rpx;
	line-height: 50rpx;
	background-color: #DCDFE6;
	margin: 10rpx 20rpx;
	text-align: center;
}

.number{
	padding: 10rpx;
	display: flex;
	justify-content: space-around;
}

#dibu{
	position: absolute;
	bottom: 0;
	background-color: #FFFFFF;
}

</style>
